<template>
  <el-button size="small" @click="showDrawer(true)" type="primary"
    >高级搜索</el-button
  >

  <jm-drawer
    size="50%"
    v-model="isShowDrawer"
    @close="showDrawer(false)"
    @confirm="onSubmit"
    title="高级搜索"
    direction="rtl"
  >
    <div class="flex h-full">
      <div class="flex-1">
        <jm-search-layout layout="vertical">
          <jm-search-box
            class="mb-10px"
            :label="item.label"
            :key="item.prop"
            width="80px"
            v-for="item in searchFields"
          >
            <div class="flex items-center">
              <a-select
                v-if="item?.render?.name === 'a-select'"
                v-model:value="moreSearchState[item.prop]"
                mode="tags"
                :maxTagCount="4"
                :tokenSeparators="[' ']"
                v-bind="item?.render?.props"
                style="width: 100%"
                placeholder="支持复制或输入关键词"
              ></a-select>
              <component
                v-else
                class="w-full"
                :clearable="true"
                :placeholder="hanlderPlaceHolder(item)"
                v-bind="item?.render?.props"
                :is="item?.render?.name"
                v-model="moreSearchState[item.prop]"
              ></component>

              <div class="ml-12px w-150px">
                <el-checkbox
                  :true-value="1"
                  :false-value="0"
                  v-model="item.isChecked"
                  class="ml-12px"
                  >默认</el-checkbox
                >
              </div>
            </div>
          </jm-search-box>
        </jm-search-layout>
      </div>
    </div>

    <template #btns>
      <div style="flex: 1" class="text-left">
        <el-button size="small" type="primary" @click="onSearch"
          >搜索</el-button
        >
      </div>
    </template>
  </jm-drawer>
</template>
<script setup>
import { inject, ref } from 'vue'
import { hanlderPlaceHolder } from '@/hooks/useComponentConfig'
const {
  searchFields,
  isShowDrawer,
  showDrawer,
  moreSearchState,
  onSearch,
  onSubmit
} = inject('modules').moreSearchStore

const options = ref([])
const value = ref([])
</script>
<style lang="scss" scoped></style>
